<template>
  <!--结果弹窗-->
  <van-popup v-model="showGameResult" :style="{ background: 'transparent' }">
    <div
      :class="getGamePrize ? 'success': 'fail'"
      class="game-result">
      <div class="game-result-wrap alignCenter">
        <div class="prize" v-if="getGamePrize">
          <div class="txt1">恭喜你，中了{{ game_prize_id.prize }} </div>
          <div class="txt2 coupon" v-if="game_prize_id.prize_type==1">获得面值<span class="coupon_num">{{game_prize_id.coupon_value}}</span><span class="units">{{game_prize_id.coupon_units}}</span>优惠券一张</div>
          <div class="txt2" v-else>{{ game_prize_id.prize_title }} <span v-if="game_prize_id.link">请前往奖品详情填写收货信息</span></div>
          <div class="btn" @click="handleClickJump">
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_btn.png" alt="">
          </div>
           <div class="coupon_btn" v-if="game_prize_id.prize_type==1" @click="jumpUrl('mycoupon')">
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/coupon_btn.png" alt="">
          </div>
        </div>
        <div class="no-prize" v-else>
          <div class="txt3" v-if="game_prize_id.noPrizeMsg">{{ game_prize_id.noPrizeMsg }}</div>
          <div v-else>
            <div class="txt1" >很遗憾，你和奖品只差一丢丢 </div>
            <div class="img">
              <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/emoji.png" alt="">
            </div>
          </div>
          <div class="btn" @click="handleClickConfig">
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_btn.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="game-close" @click="showGameResult = false">
      <img  src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_close.png" alt="">
    </div>
  </van-popup>

</template>

<script>
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'
  import { Popup } from 'vant'
  Vue.use(Popup)

  export default Vue.extend({
    name: 'index',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      getGamePrize: { // 是否中奖
        type: Boolean,
        default: false
      },
      game_prize_id: { // 奖品数据
        default: {}
      },
      fail_url: {
        default: ''
      }
    },
    watch: {
      visible(val) {
        this.showGameResult = val
      },
      showGameResult(val) {
        this.$emit('update:visible', val)
        if (!val) {
          this.$emit('gameReload')
          // location.reload()
        }
      }
    },
    data() {
      return {
        showGameResult: false
      }
    },
    methods: {
      jumpUrl(url, data) {
        this.$JumpName(this, url, data)
      },
      /**
       * 去领奖
       */
      handleClickJump() {
        if (this.game_prize_id.link) {
          // TODO 小程序跳转
            openPage(this.game_prize_id.link)
        } else {
          this.showGameResult = false
        }
      },
      // 梦泉特殊处理:未中奖点击确定按钮
      // 未中奖跳转链接
      handleClickConfig() {
        if (this.fail_url) {
          openPage(this.fail_url)
          // location.href = this.fail_url
        } else {
          this.showGameResult = false
        }
      }
    }
  })
</script>

<style lang="scss">
  .game-result{
    position: relative;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 226px 72px 46px;
    &.success{
      background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_bg_success.png);
    }
    &.fail{
      background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/result_bg.png);
    }
    &-wrap{
      color: #AF3C0E;
      text-align: center;
      .txt1{
        font-size: 30px;
      }
      .txt2{
        font-size: 26px;
        margin: 25px auto;
        line-height: 36px;
        &.coupon{
          .coupon_num{
            font-weight: bold;
            font-size: 40px;
            color: #f21528;
          }
          .units{
            color: #f21528;
          }
        }
      }
      .txt3{
        font-size: 26px;
        width: 70%;
        margin: 0 auto;
        line-height: 36px;
      }
      .img{
        margin-top: 20px;
        img{
          width: 80px;
        }
      }
      .btn{
        width: 100%;
        text-align: center;
        margin-top: 132px;
        img{
          width: 460px;
        }
      }
      .coupon_btn{
        width: 100%;
        height: 94px;
        margin-top: 20px;
        img{
          max-width: 100%;
          width: 100%;
        }
      }
    }
  }
  .game-close{
    text-align: center;
    padding-top: 30px;
    img{
      width: 75px;
    }
  }
</style>
